<template>
  <div style="height: 100%;overflow-y: auto">
    <div>
      <div class="title" style="width: 100%">
        <div class="title-mark"></div>
        <div class="title-text">采集数据</div>
        <div style="clear: both"></div>
      </div>
      <div style="padding-right: 20px;display: flex;gap: 15px;flex-flow: wrap">
        <div class="show-gather-item">
          <div class="show-gather-item-name">减轻负担</div>
          <div class="show-gather-item-content">{{ burden }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">最近裁决方式</div>
          <div class="show-gather-item-content1">{{ lastVerdictStrategy }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">最近裁决结果</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Last_verdict_result == 1 ? "成功" : "失败" }}
          </div>
        </div>
        <!--        <div class="show-gather-item">
                  <div class="show-gather-item-name">下发报文状态</div>
                  <div class="show-gather-item-content1" style="color: green">成功</div>
                </div>-->
        <div class="show-gather-item">
          <div class="show-gather-item-name">拟态判决</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Mimic_ready == 1 ? "可用" : "不可用" }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">uart状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Uart_usable == '1' ? "正常" : "不可用" }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">程序烧录状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ready == undefined ? "" : (state.ZYNQ_ready == '1' ? "完成" : "进行中") }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">SPI Flash</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.Zynq_OS_ready == '1' ? '存在' : '不存在' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核1自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM0_ready == '1' ? '正常' : '异常' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核2自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM1_ready == '1' ? '正常' : '异常' }}
          </div>
          <div class="show-gather-item-content1"></div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核3自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM2_ready == '1' ? '正常' : '异常' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">核4自举状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Last_verdict_result == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM3_ready == '1' ? '正常' : '异常' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">上行建链</div>
          <div class="show-gather-item-content">{{ state.Host_Pcie_pf1linkup }}</div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">异常流量状态</div>
          <div class="show-gather-item-content1" :style="{
            color: rejectedCount  <= 0  ? 'green' : 'red'
          }">{{ rejectedCount <= 0 ? '无异常' : '有异常' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">网络状态</div>
          <div class="show-gather-item-content1" :style="{
            color: state.ZYNQ_ARM3_ready == 1 ? 'green' : 'red'
          }">{{ state.ZYNQ_ARM3_ready == '1' ? '正常' : '异常' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">敏感词算法软件</div>
          <div class="show-gather-item-content1" :style="{
            color: state.Algorithm_state == 1 ? 'green' : 'red'
          }">{{ state.Algorithm_state == '1' ? '正常' : '关闭' }}
          </div>
        </div>
        <div class="show-gather-item">
          <div class="show-gather-item-name">敏感词算法软件版本</div>
          <div class="show-gather-item-content">{{ state.Algorithm_version }}</div>
        </div>
        <div class="show-gather-item" style="width: auto;min-width: 150px;max-width: 450px;">
          <div class="show-gather-item-name">敏感词</div>
          <div class="show-gather-item-content" style="line-height: unset">{{ sensitiveWords }}</div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div style="width: 100%;height: 530px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">上下行统计</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
          <div ref="echartUpDownRef" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">包数统计</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
          <div ref="echartPackageRef" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">字节数统计</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
          <div ref="echartByteRef" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">态势感知</div>
          <div style="clear: both"></div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
          <div ref="echartLineRef" style="height: 100%;width: 100%;"></div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 200px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">最近TCP报文</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">最近HTTP报文</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 200px">
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">网口1Payload</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
      <div style="height: 100%;float: left;width: 49%">
        <div class="title">
          <div class="title-mark"></div>
          <div class="title-text">网口2Payload</div>
        </div>
        <div style="width: 100%;height: calc(100% - 80px)">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, inject, onMounted, onUnmounted, reactive, ref} from "vue";
import * as echarts from "echarts";
import {AXIOS_NAME} from "@/constant/constant.js";
import Table from "@/components/plugs/table/Table.vue";

const state = reactive({});
const burden = ref("0%");

const lastVerdictStrategy = computed(() => {
  if (state.Last_verdict_strategy == 1) {
    return "多数裁决";
  } else if (state.Last_verdict_strategy == 2) {
    return "加权多数判决";
  } else if (state.Last_verdict_strategy == 3) {
    return "快速比对判决"
  }
  return "";
});
const rejectedCount = computed(() => {
  if (state.rejected_flows == undefined) {
    return 0;
  }
  let count = 0;
  for (const item of state.rejected_flows) {
    count += item.count
  }
  let temp = (count / state.Total_packets * 100).toFixed(2);
  burden.value = temp + "%";
  return count;
});

const downCount = computed(() => {
  if (state.docker_connections == undefined) {
    return 0;
  }
  let count = 0;
  for (const item of state.docker_connections) {
    count += item.Zynq_docker_num
  }
  return count;
});

const sensitiveWords = computed(() => {
  if (state.top_sensitive_words == undefined || state.top_sensitive_words.lenght <= 0) {
    return "";
  }
  let temp = "";
  for (const item of state.top_sensitive_words) {
    temp += item.word + "[" + item.count + "],";
  }
  if (temp.indexOf(",") != -1) {
    temp = temp.substring(0, temp.lastIndexOf(","));
  }
  return temp;
});


const fagaDataInfo = reactive([]);
for (let i = 0; i < 11; i++) {
  fagaDataInfo.push({"type": "输入", "ip": "172.0.0.1", "port": "2003", "time": "2025-06-25 11:32:32"});
}
const $axios = inject(AXIOS_NAME);
const echartLineRef = ref(null);
const echartUpDownRef = ref(null);
const echartPackageRef = ref(null);
const echartByteRef = ref(null);
let lineChart, upDownChart,packageEchart,byteEchart;
let interval;

onMounted(() => {
  lineChart = echarts.init(echartLineRef.value);
  upDownChart = echarts.init(echartUpDownRef.value);
  packageEchart = echarts.init(echartPackageRef.value);
  byteEchart = echarts.init(echartByteRef.value);
  getFirstPageState();
});

onUnmounted(() => {
  if (interval) {
    clearInterval(interval);
  }
})
interval = setInterval(function () {
  // getEchartData();
  getFirstPageState();
}, 3000)
const getEchartData = () => {
  $axios.post("/monitor/getLinuxBaseInfo", {}).then(response => {
    const data = response.data;
    console.log(data);
    if (data.code != 1 || data.data.length <= 0) {
      return;
    }
    const lastData = data.data[0];
    handleLineEchart(data.data);
  });
}

const getFirstPageState = () => {
  $axios.post("/first/getFirstPageGatherData", {"type": "state_count"}).then(response => {
    const data = response.data.data;
    if (data.length <= 0) {
      for (let key in state) {
        state[key] = undefined;
      }
      return;
    }
    const mustNewData = data[data.length - 1];
    for (let key in mustNewData) {
      state[key] = mustNewData[key];
    }
    //生成echart数据
    const upDownLegends = ["下游建链", "上行接收", "上行统计", "下行输入统计", "下行输出统计"];
    let xAxis = [];
    let xxjl = [], sxjs = [], sxtj = [], sxjl = [], xxsrtj = [], xxsctj = [];
    const upDownSeries = [
      {name: '下游建链', type: 'line', data: xxjl},
      {name: '上行接收', type: 'line', data: sxjs},
      {name: '上行统计', type: 'line', data: sxtj},
      {name: '下行输入统计', type: 'line', data: xxsrtj},
      {name: '下行输出统计', type: 'line', data: xxsctj}
    ];

    const packageLegends = ["ZYNQ缓存包数","TCP包数","UDP包数","异常包数","拒止包数","总流量包数"];
    let zynqp = [],tcpP = [],updP = [],exceptionP = [],rejectP = [],allP = [];
    const packageSeries = [
      {name: 'ZYNQ缓存包数', type: 'line', data: zynqp},
      {name: 'TCP包数', type: 'line', data: tcpP},
      {name: 'UDP包数', type: 'line', data: updP},
      {name: '异常包数', type: 'line', data: exceptionP},
      {name: '拒止包数', type: 'line', data: rejectP},
      {name: '总流量包数', type: 'line', data: allP}
    ];

    const byteLegends = ["总流量字节数","ZYNQ缓存字节"];
    let allByte = [],zynqBytes = [];
    const byteSeries = [
      {name: '总流量字节数', type: 'line', data: allByte},
      {name: 'ZYNQ缓存字节', type: 'line', data: zynqBytes},
    ]


    for (const item of data) {
      let sxtjCount = 0;
      for (const dItem of item.docker_connections) {
        sxtjCount += dItem.Zynq_docker_num
      }

      let rejectCount = 0;
      for (const rItem of item.rejected_flows) {
        rejectCount += rItem.count
      }

      xAxis.push(item.gatherDate);
      xxjl.push(item.Net1_connect_num);
      sxjs.push(item.Net1_packet_num);
      sxtj.push(sxtjCount);
      sxjl.push(item.Host_Pcie_pf1linkup);
      xxsrtj.push(sxtjCount);
      xxsctj.push(item.Zynq_Net2_num);

      zynqp.push(item.ZYNQ_packet_num);
      tcpP.push(item.Total_Tcp_packets);
      updP.push(item.Total_Udp_packets);
      exceptionP.push(rejectCount);
      rejectP.push(rejectCount);
      allP.push(item.Total_packets);

      allByte.push(item.Total_bytes);
      zynqBytes.push(item.ZYNQ_byte_num);
    }

    handleGatherEchart(upDownLegends,xAxis,upDownSeries,upDownChart);
    handleGatherEchart(packageLegends,xAxis,packageSeries,packageEchart);
    handleGatherEchart(byteLegends,xAxis,byteSeries,byteEchart);

  });
}

const handleGatherEchart = (legends, xAxis, series, chart) => {
  let options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legends
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: series
  };
  chart.setOption(options);
}

const handleLineEchart = (data) => {
  let xAxis = [];
  let revData = [];
  let senData = [];
  data.forEach((item, index) => {
    xAxis.push((index + 1) + "s");
    revData.push(item.networkIn);
    senData.push(item.networkOut);
  });
  let options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['次数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value',
      axisLabel: { //刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
        formatter: '{value}s'
      }
    },
    series: [
      {
        name: '次数',
        type: 'line',
        stack: 'Total',
        data: revData
      }
    ]
  };
  lineChart.setOption(options);
}
</script>

<style scoped>
.title {
  height: 50px;
  width: 49%;
  margin-top: 15px;
}

.title-mark {
  width: 5px;
  height: 30px;
  background-color: #409eff;
  float: left
}

.title-text {
  width: 70%;
  height: 30px;
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
  line-height: 30px;
  color: #797B7C
}

.show-gather-item {
  width: 150px;
  height: 95px;
  border: 1px solid #CACACA;
  border-radius: 5px;
  word-break: break-all;
}

.show-gather-item-name {
  width: 100%;
  height: 25px;
  text-align: center;
  line-height: 25px;
  color: #949494;
  font-size: 15px;
}

.show-gather-item-content {
  width: 100%;
  height: 70px;
  font-size: 25px;
  position: relative;
  text-align: center;
  line-height: 70px;
  color: #020202;
}

.show-gather-item-content1 {
  width: 100%;
  height: 70px;
  font-size: 25px;
  position: relative;
  text-align: center;
  line-height: 70px;
  color: #020202;
}

.docker-container-top-table {
  width: 100%;
  text-align: left;
  border: 0px;
  border-collapse: collapse;
}

.docker-container-top-table tr, thead {
  height: 35px;
  border-bottom: 1px solid #F0F0F0;
}
</style>